<template>
  <el-container class="home">
    <el-aside width="auto" style="transition: 0.3s ease-in-out;">
      <el-menu
          class="el-menu-vertical-demo"
          :default-active="$route.fullPath"
          :collapse="isCollapse"
          background-color="#2F4050"
          active-text-color="#fff000"
          text-color="#fff"
          :unique-opened="false"
          :router="true">

        <el-menu-item class="nav-header" style="padding :30px 10px">
          <router-link to="/admin">
            <img src="../../assets/img/login-logo2.png" alt v-show="!isCollapse" width="120px"/>
            <img src="../../assets/img/logo.png" alt v-show="isCollapse" width="40px"/>
          </router-link>
        </el-menu-item>


        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">基础信息管理</span>
          </template>

          <el-menu-item index="/admin/announcement">社区公告</el-menu-item>
          <el-menu-item index="/admin/activity">娱乐活动</el-menu-item>
          <el-menu-item index="/admin/comment">居民留言</el-menu-item>
        </el-submenu>

        <el-submenu v-if="$store.state.userData.role == '2'" index="2">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">人员管理</span>
          </template>

          <el-menu-item index="/admin/resident">居民用户</el-menu-item>
          <el-menu-item index="/admin/staff">工作人员</el-menu-item>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-position"></i>
            <span slot="title">服务管理</span>
          </template>

          <el-menu-item index="/admin/visit-record">随访记录</el-menu-item>
          <el-menu-item index="/admin/medical-service">就诊记录</el-menu-item>
          <el-menu-item v-if="$store.state.userData.role == '2'" index="/admin/work-place">工作区域</el-menu-item>
          <el-menu-item index="/admin/treatment-type">疾病类型</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header height="50px">
        <div class="top-left">
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <button
                type="button"
                @click="change"
                class="open-btn"
                :class="{ 'el-icon-s-fold': !isCollapse, 'el-icon-s-unfold':isCollapse }"
            ></button>
          </el-radio-group>
        </div>
        <div class="top-right">
          <el-dropdown>
            <i class="user-icon el-icon-s-custom">
              <span>
                {{ $store.state.userData.tuserName }}
              </span>
            </i>
            <el-dropdown-menu>
              <el-dropdown-item>
                <div @click="profile">个人中心</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="logout">退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-main class="main-container">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import modelUser from '@/models/user';

export default {
  name: "Home",
  data() {
    return {
      isCollapse: false,
    };
  },
  created() {
  },
  computed: {},
  methods: {
    /**
     * 页面改变大小
     */
    change() {
      this.isCollapse = !this.isCollapse;
      this.navWidth == "200px" ? (this.navWidth = "65px") : (this.navWidth = "200px");
    },

    /**
     * Dropdown
     */
    profile() {
      this.$router.push("/profile");
    },

    logout() {
      modelUser.logout();
    }
  }
};

</script>
<style lang="less" scoped>
@import "../../assets/less/base.less";

.home {
  width: 100%;
  height: 100%;


  .msg {
    height: 40px;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }

  .nav-header a {
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  .top-right a {
    color: @fontColor;
  }

  .el-aside {
    background: @navColor;
  }

  .right {
    background: #2f4050;
  }

  .main {

    background: white;
    margin-left: 200px;
    transition: 0.3s ease-in-out;
  }

  .main-open {
    margin-left: 65px;
  }

  .open-btn {
    color: white;
    background: @greenColor;
    padding: 5px 10px;
    border-radius: 2px;
    border: none;
    font-size: 20px;
  }

  .nav-header {
    background: url("../../assets/img/header-profile.png") center;
    width: 100%;
    height: 120px;
    padding-top: 30px;
    text-align: center;
  }

  .el-menu {
    background: @navColor;
    border-right: none;
  }

  .el-submenu__title:hover {
    background-color: @navChoose;
  }

  .el-header {
    padding: 10px 20px;
  }

  .top-left {
    float: left;
    // margin-left: 10px;
  }

  .top-right {
    float: right;
  }


  .main-container {
    background-color: #f3f3f4;
    padding: 20px;

    & > div {
      border-radius: 12px;
    }
  }

  .user-icon {
    cursor: pointer;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;

    span {
      font-size: 16px;
      margin-left: 4px;
    }
  }
}
</style>